<template>
  <div>
    <p class="word-title-1">技  术  服  务  合  同  书</p>
    <p class="text-center">含技术培训、技术中介</p>
    <el-form
      ref="form"
      label-width="100px"
      size="medium"
      label-suffix="："
    >
      <el-row>
        <el-col :span="12" :offset="12">
          <el-form-item class="m-bottom-sm" label="合同编号" prop="code">
            {{form.code}}
            <!-- <template v-if="disabled">
              {{form.code}}
            </template>
            <template v-else>
              <el-input v-model="form.code" placeholder="合同编号" />
            </template> -->
          </el-form-item>
          <el-form-item class="m-bottom-sm" label="签订时间" prop="time">
            <template v-if="disabled">
              {{form.time}}
            </template>
            <template v-else>
              <el-date-picker
                style="width: 100%"
                v-model="form.time"
                type="date"
                format="yyyy年M月d日"
                value-format="yyyy年M月d日"
                prefix-icon=""
                placeholder="签订时间"
              />
            </template>
          </el-form-item>
          <el-form-item class="m-bottom-sm" label="签订地点" prop="address">
            <template v-if="disabled">
              {{form.address}}
            </template>
            <template v-else>
              <el-input v-model="form.address" placeholder="签订地点" />
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="m-bottom-sm" label="甲方" label-width="54px" prop="company1">
            <template v-if="disabled">
              {{form.company1}}
            </template>
            <template v-else>
              <el-input v-model="form.company1" placeholder="甲方名称" />
            </template>
          </el-form-item>
          <el-form-item class="m-bottom-sm" label="乙方" label-width="54px" prop="company2">
            <template v-if="disabled">
              {{form.company2}}
            </template>
            <template v-else>
              <el-input v-model="form.company2" placeholder="乙方名称" />
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'WordHeader1',
  props: {
    disabled: {type: Boolean, default: false},
    value: {type: Object, default: () => ({})}
  },
  watch: {
    value(newVal, oldVal) {
      this.form = {...newVal};
    }
  },
  data() {
    return {
      form: {
        code: 'HTBH001',
        time: '',
        address: '',
        company1: '',
        company2: ''
      }
    };
  },
  methods: {
    getValues() {
      return {...this.form};
    }
  }
};
</script>
